<template>
  <div class="container">
    <div id="targetContainer1"></div>
    <div id="targetContainer2"></div>
    <div class="line">
      <div class="title">借款金额</div>
      <div class="value">¥{{bizAccountBill.amount}}</div>
    </div>
    <div class="line">
      <div class="title">借款人</div>
      <div class="value">{{userInfo.userName}}</div>
    </div>
    <div id="datePicker1" class="line">
      <div class="title">借款日期</div>
      <div class="value box box-ac">
        <div class="box-f1">{{bizAccountBill.loanDate}}</div>
        <div class="icon-edit icon"></div>
      </div>
    </div>
    <div id="datePicker2"  class="line">
      <div class="title">预计还款日期</div>
      <div class="value box box-ac">
        <div class="box-f1">{{bizAccountBill.returnDate}}</div>
        <!-- <div class="icon-edit icon"></div> -->
      </div>
    </div>
    <div @click="selectCompany()" class="line">
      <div class="title">借款支付公司</div>
      <div class="value box box-ac">
        <div class="box-f1">{{bizAccountBill.companyName}}</div>
        <div class="icon-edit icon"></div>
      </div>
    </div>
    <div  @click="selectDep()" class="line">
      <div class="title">借款支付部门</div>
      <div class="value box box-ac">
        <div class="box-f1">{{bizAccountBill.costCenterName}}</div>
        <div class="icon-edit icon"></div>
      </div>
    </div>
    <div class="bottom box box-ac">
      <div v-if="!bizAccountBill.state || bizAccountBill.state == 20" @click="handleSubmit(0)" class="btn box box-f1 box-ac box-jc w-p100">暂存草稿</div>
      <div v-if="bizAccountBill.state == 25" @click="abandonNewBills()" class="btn box box-f1 box-ac box-jc w-p100">废弃</div>
      <div @click="handleSubmit(1)" class="btn box box-f1 box-ac box-jc w-p100">最后一步 发起K2</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getBillConfig, getJMByBillNum } from '@/assets/js/common'
import '@/assets/css/DateSelector.scss'
import '@/assets/js/DateSelector'
import { abandonNewBills } from '@/assets/js/api'

export default {
  name: 'jiekuanStep3',
  computed: {
    ...mapState(['userNum', 'userInfo', 'bizAccountBill'])
  },
  data () {
    return {
    }
  },
  mounted () {
    this.initPicker()
  },
  methods: {
    initPicker () {
      let _this = this
      let liHeight = Math.floor(document.documentElement.clientWidth / 7.5) * 0.8
      let loanDate = this.bizAccountBill.loanDate
      let returnDate = this.bizAccountBill.returnDate
      this.picker = new DateSelector({
        input: 'datePicker1',
        container: 'targetContainer1',
        liHeight,
        type: 0,
        // 0：不需要tab切换，自定义滑动内容，建议小于三个；
        // 1：需要tab切换，【年月日】【时分】完全展示，固定死，可设置开始年份和结束年份
        param: [1, 1, 1],
        // 设置['year','month','day','hour','minute'],1为需要，0为不需要,需要连续的1
        beginTime: [2018, 1, 1],
        // 如空数组默认设置成1970年1月1日0时0分开始，如需要设置开始时间点，数组的值对应param参数的对应值。
        endTime: [],
        // 如空数组默认设置成次年12月31日23时59分结束，如需要设置结束时间点，数组的值对应param参数的对应值。
        recentTime: loanDate.split('-'),
        // 如不需要设置当前时间，被为空数组，如需要设置的开始的时间点，数组的值对应param参数的对应值。
        success: (arr, arr2) => {
          _this.$store.commit('bizAccountBill', {
            loanDate: `${arr2[0]}-${arr2[1]}-${arr2[2]}`
          })
        }
      })
      // this.picker = new DateSelector({
      //   input: 'datePicker2',
      //   container: 'targetContainer2',
      //   liHeight,
      //   type: 0,
      //   // 0：不需要tab切换，自定义滑动内容，建议小于三个；
      //   // 1：需要tab切换，【年月日】【时分】完全展示，固定死，可设置开始年份和结束年份
      //   param: [1, 1, 1],
      //   // 设置['year','month','day','hour','minute'],1为需要，0为不需要,需要连续的1
      //   beginTime: [2018, 1, 1],
      //   // 如空数组默认设置成1970年1月1日0时0分开始，如需要设置开始时间点，数组的值对应param参数的对应值。
      //   endTime: [],
      //   // 如空数组默认设置成次年12月31日23时59分结束，如需要设置结束时间点，数组的值对应param参数的对应值。
      //   recentTime: returnDate.split('-'),
      //   // 如不需要设置当前时间，被为空数组，如需要设置的开始的时间点，数组的值对应param参数的对应值。
      //   success: (arr, arr2) => {
      //     _this.$store.commit('bizAccountBill', {
      //       returnDate: `${arr2[0]}-${arr2[1]}-${arr2[2]}`
      //     })
      //   }
      // })
    },
    selectCompany () {
      if (this.readonly) return
      this.$router.push('/selectCompany')
    },
    selectDep () {
      if (this.readonly) return
      this.$router.push({
        path: '/selectDep',
        query: {
          companyNum: this.bizAccountBill.companyNum
        }
      })
    },
    handleSubmit (isSubmit) {
      if (+this.bizAccountBill.state === 25) {
        this.initK2()
        return
      }
      let { amount, purpose, expenseNum, dailyLoanNum, companyNum, costDeptNum, loanDate, returnDate, loanType, relateBillNumber } = this.bizAccountBill
      let relateBillType
      let linkJM = getJMByBillNum(relateBillNumber)
      if (linkJM === 'FS') {
        relateBillType = 'OtherExpenseBill'
      } else if (linkJM === 'SX') {
        relateBillType = 'ProjectApproval'
      } else {
        relateBillType = ''
      }
      let dailyLoanBill = {
        userNum: this.userInfo.userNum,
        accAccountNum: '',
        purpose, // 借款用途
        expenseNum, // 费用类型编码
        dailyLoanNum, // 借款单编码
        companyNum,
        costDeptNum,
        isSubmit,
        amount,
        loanDate, // 借款日期（yyyy-MM-dd）
        returnDate, // 预计还款日期（yyyy-MM-dd）
        loanType: loanType.type, // 用途说明20-事项借款   30-备用金借款   40-一般借款
        relateBillType, // 借款单据类型（费用申请单-OtherExpenseBill、事项申请单-ProjectApproval）
        relateBillNumber // 关联单据编码
      }
      this.$http({
        url: this.$config.api.host,
        data: {
          method: 'saveDailyLoanBills',
          dailyLoanBill: JSON.stringify(dailyLoanBill)
        }
      }).then(res => {
        if (res.code === 200) {
          this.$store.commit('bizAccountBill', {
            dailyLoanNum: res.number
          })
          if (isSubmit === 0) {
            this.$store.commit('bizAccountBill', {
              state: 20
            })
            this.$tools.openToast({
              msg: '暂存成功',
              duration: 2000
            })
          } else {
            this.initK2()
          }
        }
      })
    },
    initK2 () {
      let billNum = this.bizAccountBill.dailyLoanNum
      let JM = getJMByBillNum(billNum)
      let billConfig = getBillConfig()
      let k2Data = {}
      k2Data.billNum = billNum
      k2Data.BSID = billConfig[JM].BSID
      let obj = {
        '40': 'YIBAN',
        '20': 'SHIXIANG',
        '30': 'BEIYONG'
      }
      k2Data.ExpenseType = obj[this.bizAccountBill.loanType.type + '']
      k2Data.sCapital = this.bizAccountBill.amount
      k2Data.sProcessSubject = this.userInfo.userNum + '_' + this.bizAccountBill.expenseName + '_' + billConfig[JM]['title']
      sessionStorage.setItem('k2Data', JSON.stringify(k2Data))
      this.$router.push('/sendK2')
    },
    // 废弃单据
    abandonNewBills () {
      abandonNewBills(this.bizAccountBill.billNum, () => {
        this.$store.commit('resetBizAccountBill')
        this.$router.replace('/')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.line{
  padding:.3rem;
  background-color:#FFF;
  border-bottom:1px solid #ddd;
  &:nth-of-type(1) {
    margin-top:.35rem;
  }
  .title{
    font-size:.3rem;
  }
  .value{
    margin-top:.15rem;
    color:#aaa;
    font-size:.36rem;
  }
  textarea{
    margin-top:.25rem;
    padding:.15rem;
    border:1px solid #666;
    border-radius:.15rem;
    font-size:.3rem;
    height:1.8rem;
    margin-bottom:.25rem;
  }
}
.bottom{
  width:100%;
  background-color:#FFF;
  height:1rem;
  font-size:.36rem;
  position:absolute;
  bottom:0;
  left:0;
  .btn{
    color:$themeColor;
    height:100%;
    &:nth-of-type(2){
      color:#FFF;
      background-color: $themeColor;
    }
  }
}
</style>
